import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Button from '../src/components/button/button.vue';
import Tab from '../src/components/tab/tab.vue';
import TabHead from '../src/components/tab/tab-head.vue';
import TabBody from '../src/components/tab/tab-body.vue';
import TabItem from '../src/components/tab/tab-item.vue';
import TabPanel from '../src/components/tab/tab-panel.vue';

<Meta title="数据展示/Tab 选项卡" component={Tab} />

# Tab

### 引入组件

```js
import { Tab, TabHead, TabBody, TabItem, TabPanel } from 'graceful-ui';
```

### 基本使用

<Preview>
  <Story name="basic 基本使用">
    {{
      components: { Tab, TabHead, TabBody, TabItem, TabPanel, Button },
      template: `
          <div>
            <Tab :selected.sync="selectedTab">
              <TabHead>
                <TabItem name="tab1">tab1</TabItem>
                <TabItem name="tab2">tab2</TabItem>
                <TabItem name="tab3">tab3</TabItem>
              </TabHead>
              <TabBody>
                <TabPanel name="tab1">panel1</TabPanel>
                <TabPanel name="tab2">panel2</TabPanel>
                <TabPanel name="tab3">panel3</TabPanel>
              </TabBody>
            </Tab>
          </div>
        `,
      data() {
        return {
          selectedTab: 'tab1',
        };
      },
      created() {},
    }}
  </Story>
</Preview>

### 禁用

禁用某一项

<Preview>
  <Story name="disabled 禁用">
    {{
      components: { Tab, TabHead, TabBody, TabItem, TabPanel, Button },
      template: `
          <div>
            <Tab :selected.sync="selectedTab">
              <TabHead>
                <TabItem name="tab1">tab1</TabItem>
                <TabItem name="tab2" disabled>tab2</TabItem>
                <TabItem name="tab3">tab3</TabItem>
              </TabHead>
              <TabBody>
                <TabPanel name="tab1">panel1</TabPanel>
                <TabPanel name="tab2">panel2</TabPanel>
                <TabPanel name="tab3">panel3</TabPanel>
              </TabBody>
            </Tab>
          </div>
        `,
      data() {
        return {
          selectedTab: 'tab1',
        };
      },
      created() {},
    }}
  </Story>
</Preview>

## API

Tab

<Props of={Tab} />
TabHead
<Props of={TabHead} />
TabBody
<Props of={TabBody} />
TabItem
<Props of={TabItem} />
TabPanel
<Props of={TabPanel} />
